<template>
	
<view class="work-container">
	  <view class="header-section text-center">
	    <image style="width: 50rpx;height: 50rpx;" src="/static/logo200.png" mode="widthFix">
	    </image>
	    <uni-title type="h6" title="蒲公英管理"></uni-title>
	  </view>
    <!-- 轮播图 -->
    <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
      <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
        <swiper-item v-for="(item, index) in data" :key="index">
          <view class="swiper-item" @click="clickBannerItem(item)">
            <image :src="item.image" mode="aspectFill" :draggable="false" />
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
	<view class="bottom-container-one-row-2" style="margin-top: 0px !important;">
		<view>
			<text style="font-size: 28rpx;">
				尊敬的『
				<text class="item-title">VIP客户</text>
				』,多参加活动入群,优惠更多
			</text>
		</view>
		<view class="ul-item">
			<view  data-index="2" data-key="" class="item" hover-class="opcity" :hover-stay-time="150">
				<text class="item-title">Lv{{'1' }}</text>
				<text class="item-name">等级</text>
			</view>
			<view  data-index="2" data-key="" class="item" hover-class="opcity" :hover-stay-time="150">
				<text class="item-title">{{ '2000' }}</text>
				<!-- <image class='item-img' src='../../static/images/my/mine_icon_jiayouzhan_3x.png'></image> -->
				<text class="item-name">积分</text>
			</view>
			<view  data-index="2" data-key="" class="item" hover-class="opcity" :hover-stay-time="150">
				<text class="item-title">{{ '3' }}</text>
				<text class="item-name">健康活动</text>
			</view>
			<view  data-index="2" data-key="" class="item" hover-class="opcity" :hover-stay-time="150">
				<text class="item-title">{{ '1' }}</text>
				<text class="item-name">诊疗活动</text>
			</view>
		</view>
	</view>
	<view class="tui-classify-box">
		<view class="tui-classify-item" hover-class="opcity" :hover-stay-time="150" @tap="toActCustom">
			<view class="tui-classify-name">定制活动</view>
		</view>
		<view class="tui-classify-item" hover-class="opcity" :hover-stay-time="150" @tap="toPlazaIndex">
			<view class="tui-classify-name">广场</view>
		</view>
		<view class="tui-classify-item" hover-class="opcity" :hover-stay-time="150" @tap="toCouponList">
			<view class="tui-classify-name">领券中心</view>
		</view>
		<view class="tui-classify-item" hover-class="opcity" :hover-stay-time="150" @tap="toMerList">
			<view class="tui-classify-name">商家</view>
		</view>
		<view class="tui-classify-item" hover-class="opcity" :hover-stay-time="150" @tap="toMemberList">
			<view class="tui-classify-name">会员推荐</view>
		</view>
	</view>
	
	<uni-list>
		<uni-list :border="true">
			<!-- 显示圆形头像 -->
			<uni-list-chat :avatar-circle="true" title="恩泰健康管理" avatar="/static/images/banner/banner01.jpg" note="关爱生命/预防疾病.为健康续航,是享受优质生活的" time="2020-02-02 20:20" ></uni-list-chat>
			<!-- 右侧带角标 -->
			<uni-list-chat title="恩泰健康管理" avatar="/static/images/banner/banner02.jpg" note="关爱生命/预防疾病.为健康续航,是享受优质生活的" time="2020-02-02 20:20"></uni-list-chat>
			<!-- 头像显示圆点 -->
			<uni-list-chat title="恩泰健康管理" avatar="/static/images/banner/banner03.jpg" note="关爱生命/预防疾病.为健康续航,是享受优质生活的" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
			
		</uni-list>
	</uni-list>
</view>
</template>

<script>
  export default {
    data() {
      return {
        current: 0,
        swiperDotIndex: 0,
        data: [{
            image: '/static/images/banner/banner01.jpg'
          },
          {
            image: '/static/images/banner/banner02.jpg'
          },
          {
            image: '/static/images/banner/banner03.jpg'
          }
        ],
		avatarList: [{
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
					}, {
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
					}, {
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
					}],
		lists: ['A', 'B', 'C', 'D', 'E'],
		        windowHeight: uni.getSystemInfoSync().windowHeight
      }
    },
	onLoad: function(e) {
	// 	// 腾讯移动统计
	// 	this.$mta.Page.init();
	// 	this.$eventHub.$on('emit', data => {
	// 		this.getLonglatByLocation(this.cityName);
	// 	});
	// 	this.listAct(this.pageIndex, true, {
	// 		cityCode: this.cityCode,
	// 		lat: this.latitude,
	// 		lng: this.longitude
	// 	});
	// 	this.getHomeData(false, false);
	
	// 	this.qqmapsdk = new QQMapWX({
	// 		key: this.tui.getQQmapsdkKey()
	// 	});
	// 	// uni原生接口获取位置==>通过经纬度翻译地址
	// 	this.getAddress();
	
		// 推荐人ID，set到storage
		if (e.recommend) {
			uni.setStorageSync('recommend', e.recommend);
		}
	
		if (e.scene) {
			let scene = decodeURIComponent(e.scene);
			console.log("scene=" + scene);
			//&是我们定义的参数链接方式
			let recommend = scene.split('&')[0];
			uni.setStorageSync('recommend', recommend);
		}
	
		setTimeout(() => {
			// this.getLonglatByLocation();
			// 根据经纬度获取地理位置
			// this.getAddress(this.longitude, this.latitude);
			// this.getAddress();
		}, 1500);
	},
    methods: {
      clickBannerItem(item) {
        console.info(item)
      },
      changeSwiper(e) {
        this.current = e.detail.current
      },
      changeGrid(e) {
        this.$modal.showToast('模块建设中~')
      }
    }
  }
</script>

<style lang="scss">
  /* #ifndef APP-NVUE */
  page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #fff;
    min-height: 100%;
    height: auto;
  }

  view {
    font-size: 14px;
    line-height: inherit;
  }

  /* #endif */
.header-section {
    display: flex;
    padding: 30rpx 0 0;
    flex-direction: column;
    align-items: center;
  }
  .text {
    text-align: center;
    font-size: 26rpx;
    margin-top: 10rpx;
  }

  .grid-item-box {
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
  }

  .uni-margin-wrap {
    width: 690rpx;
    width: 100%;
    ;
  }

  .swiper {
    height: 300rpx;
  }

  .swiper-box {
    height: 150px;
  }

  .swiper-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 300rpx;
    line-height: 300rpx;
  }

  @media screen and (min-width: 500px) {
    .uni-swiper-dot-box {
      width: 400px;
      /* #ifndef APP-NVUE */
      margin: 0 auto;
      /* #endif */
      margin-top: 8px;
    }

    .image {
      width: 100%;
    }
  }
</style>
<style>
/* pages/my/my.wxss */
.container {
	position: relative;
}

.top-container {
	height: 420rpx;
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: #5677FC;
}

.bg-img {
	position: absolute;
	width: 100%;
	height: 440rpx;
}

.logout {
	width: 110rpx;
	height: 36rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 42rpx 0 24rpx 32rpx;
	position: relative;
	z-index: 2;
}

.logout-img {
	width: 36rpx;
	height: 36rpx;
	margin-right: 11rpx;
}

.logout-txt {
	font-size: 28rpx;
	color: #fefefe;
	line-height: 28rpx;
}

.user-wrapper {
	display: flex;
	justify-content: center;
	position: relative;
	z-index: 2;
}

.user {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	z-index: 2;
}

.avatar-img {
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
	align-self: center;
}

.user-info {
	display: flex;
	flex-direction: row;
	margin-top: 30rpx;
	align-items: center;
}

.user-info-mobile {
	margin-top: 30rpx;
	position: relative;
	font-size: 28rpx;
	color: #fefefe;
	line-height: 28rpx;
	align-self: center;
	padding: 0 50rpx;
}

.edit-img {
	position: absolute;
	width: 42rpx;
	height: 42rpx;
	right: 0;
	bottom: -4rpx;
}

.edit-img > image {
	width: 42rpx;
	height: 42rpx;
	padding-left: 25rpx;
}

.middle-container {
	height: 138rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	border-radius: 10rpx;
	background-color: #ffffff;
	margin: -30rpx 30rpx 26rpx 30rpx;
	box-shadow: 0 15rpx 10rpx -15rpx #efefef;
	position: relative;
	z-index: 2;
}

.middle-item {
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.ticket-img {
	width: 80rpx;
	height: 80rpx;
	margin-left: 65rpx;
}

.middle-tag {
	font-size: 28rpx;
	color: #333333;
	line-height: 28rpx;
	font-weight: bold;
	padding-left: 22rpx;
}

.car-img {
	width: 80rpx;
	height: 80rpx;
	margin-left: 97rpx;
}
.bottom-container-one-row {
	height: 140rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 20rpx 40rpx 20rpx 40rpx;
	/* margin: 10rpx 30rpx; */
	background-color: #ffffff;
	border-radius: 10rpx;
	box-sizing: border-box;
	/* box-shadow: 0 0 10rpx #efefef; */
	/* position: relative; */
	z-index: 2;
	margin: -120rpx 30rpx 10rpx 30rpx;
	box-shadow: 0 15rpx 10rpx -15rpx #efefef;
}
.bottom-container-one-row-2 {
	height: 230rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 20rpx 40rpx 20rpx 40rpx;
	margin: 10rpx 30rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
	box-sizing: border-box;
	box-shadow: 0 0 10rpx #efefef;
}

.bottom-container {
	height: 140rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 20rpx 40rpx ;
	margin: 0rpx 30rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
	box-sizing: border-box;
	box-shadow: 0 0 10rpx #efefef;
}

.bottom-container-mer {
	height: 200rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 20rpx 40rpx ;
	margin: 0rpx 30rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
	box-sizing: border-box;
	box-shadow: 0 0 10rpx #efefef;
}

.ul-item {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.item {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.item-img {
	width: 64rpx;
	height: 64rpx;
}

.item-name {
	padding-top: 4rpx;
	font-size: 24rpx;
	color: #666666;
	min-width: 80rpx;
	text-align: center;
}

.item-name-orange {
	padding-top: 4rpx;
	font-size: 24rpx;
	color: #FF7900;
	min-width: 80rpx;
	text-align: center;
	font-weight:800;
}

.btn-feedback {
	background: transparent !important;
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
}
.item-title {
	font-weight: bold;
	font-size: 32rpx;
	color: #5677fc;
}
.item-title-big {
	font-weight: bold;
	font-size: 36rpx;
	color: #FF7900;
}
</style>
<style>
	/* @import '../../static/style/thorui.css'; */
	page {
		background: #f2f2f2;
	}

	.tui-container {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-searchbox {
		padding: 16rpx 20rpx;
		box-sizing: border-box;
	}

	.tui-rolling-search_container {
		display: flex;
		flex-flow: nowrap;
	}

	.tui-rolling-search_city {
		width: 16%;
		height: 60rpx;
		line-height: 60rpx;
		/* padding: 0 10rpx 0 0; */
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		justify-content: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 88rpx !important;
	}

	.tui-rolling-search {
		width: 84%;
		height: 60rpx;
		border-radius: 35rpx;
		padding: 0 40rpx 0 30rpx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		color: #999;
	}

	.tui-swiper {
		font-size: 26rpx;
		height: 60rpx;
		flex: 1;
		padding-left: 12rpx;
	}

	.tui-swiper-item {
		display: flex;
		align-items: center;
	}

	.tui-hot-item {
		line-height: 26rpx;
		white-space: nowrap;
		/* overflow: hidden; */
		text-overflow: ellipsis;
	}

	.tui-banner-swiper {
		width: 100%;
		height: 300rpx;
		position: relative;
	}

	.tui-slide-image {
		width: 100%;
		height: 300rpx;
		display: block;
	}

	.tui-banner-title {
		width: 100%;
		height: 70rpx;
		position: absolute;
		z-index: 9999;
		color: #fff;
		bottom: 0;
		padding: 0 30rpx;
		padding-top: 16rpx;
		font-size: 26rpx;
		/* font-weight: bold; */
		background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
		box-sizing: border-box;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* #ifdef APP-PLUS || MP */
	.tui-banner-swiper .wx-swiper-dots.wx-swiper-dots-horizontal {
		width: 100%;
		top: 280rpx;
		text-align: right;
		padding-right: 30rpx;
		box-sizing: border-box;
	}

	.tui-banner-swiper .wx-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		display: inline-flex;
		background: none;
		justify-content: space-between;
	}

	.tui-banner-swiper .wx-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 8rpx;
	}

	.tui-banner-swiper .wx-swiper-dot-active::before {
		background: #5677fc;
	}

	.tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
		width: 18rpx;
	}

	/* #endif */

	/* #ifdef H5 */
	>>>.tui-banner-swiper .uni-swiper-dots.uni-swiper-dots-horizontal {
		width: 100%;
		top: 280rpx;
		text-align: right;
		padding-right: 30rpx;
		box-sizing: border-box;
	}

	>>>.tui-banner-swiper .uni-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		display: inline-flex;
		background: none;
		justify-content: space-between;
	}

	>>>.tui-banner-swiper .uni-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 8rpx;
	}

	>>>.tui-banner-swiper .uni-swiper-dot-active::before {
		background: #5677fc;
	}

	>>>.tui-banner-swiper .uni-swiper-dot.uni-swiper-dot-active {
		width: 18rpx;
	}

	/* #endif */

	.tui-news-flex {
		width: 100%;
		display: flex;
	}

	.tui-flex-start {
		align-items: flex-start !important;
	}

	.tui-flex-center {
		align-items: center !important;
	}

	.tui-flex-column {
		flex-direction: column !important;
	}

	.tui-flex-between {
		justify-content: space-between !important;
	}

	.tui-news-cell {
		display: flex;
		padding: 20rpx 30rpx;
	}

	.tui-news-tbox {
		flex: 1;
		width: 100%;
		box-sizing: border-box;
		display: flex;
	}

	.tui-news-picbox {
		display: flex;
		position: relative;
	}

	.tui-w220 {
		width: 220rpx;
	}

	.tui-h165 {
		height: 165rpx;
	}

	.tui-block {
		display: block;
	}

	.tui-w-full {
		width: 100%;
	}

	.tui-one-third {
		width: 33%;
	}

	.tui-news-title {
		width: 100%;
		font-size: 34rpx;
		word-break: break-all;
		word-wrap: break-word;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		box-sizing: border-box;
	}

	.tui-pl-20 {
		padding-left: 20rpx;
	}

	.tui-pt20 {
		padding-top: 20rpx;
	}

	.tui-sub-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #999;
		box-sizing: border-box;
		line-height: 24rpx;
	}

	.tui-sub-source {
		font-size: 26rpx;
	}

	.tui-sub-cmt {
		font-size: 24rpx;
		line-height: 24rpx;
		display: flex;
		align-items: center;
	}

	.tui-tag {
		padding: 2rpx 6rpx !important;
		margin-left: 10rpx;
	}

	.tui-scale {
		transform: scale(0.6);
		transform-origin: center center;
	}

	.tui-btm-badge {
		position: absolute;
		right: 0;
		bottom: 0;
		font-size: 24rpx;
		color: #fff;
		padding: 2rpx 12rpx;
		background: rgba(0, 0, 0, 0.6);
		z-index: 20;
		transform: scale(0.8);
		transform-origin: 100% 100%;
	}

	.tui-video {
		position: absolute;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		transform-origin: 0 0;
	}

	.tui-icon {
		background: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		padding: 26rpx;
	}

	.tui-icon-box .tui-icon {
		background: none;
		padding: 0;
		border-radius: 0;
	}

	/* 	.tui-title {
		padding: 50upx 30upx 30upx 30upx;
		font-size: 32upx;
		color: #333;
		box-sizing: border-box;
		font-weight: bold;
		clear: both;
	} */

	/* 	.tui-grid-icon {
		width: 64upx;
		height: 64upx;
		margin: 0 auto;
		text-align: center;
		vertical-align: middle;
	}
	*/
	.tui-grid-label {
		display: block;
		text-align: center;
		font-weight: 400;
		color: #333;
		font-size: 24upx;
		white-space: nowrap;
		overflow: hidden;
		/* text-overflow: ellipsis; */
		margin-top: 10upx;
	}

	.tui-grid-label-5 {
		margin-top: 0 !important;
		color: #5677fc !important;
	}

	/*classify*/

	.tui-classify-box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
		background-color: #fff;
	}

	.tui-classify-item {
		width: 20%;
		text-align: center;
	}

	.tui-classify-item-col4 {
		width: 25%;
		text-align: center;
		margin-bottom: 16rpx;
	}

	.tui-classify-img-col4 {
		width: 150rpx;
		height: 150rpx;
		border-radius: 6%;
	}

	.tui-classify-img {
		width: 88rpx;
		height: 88rpx;
		margin-top: 30rpx;
	}

	.tui-classify-name {
		font-size: 26rpx;
		line-height: 26rpx;
		padding-top: 8rpx;
		color: #555;
		white-space: nowrap;
	}

	.tui-classify-name-member {
		font-size: 26rpx;
		line-height: 26rpx;
		/* padding-top: 8rpx; */
		color: #555;
		white-space: nowrap;
	}

	/*classify*/

	/* title */
	.example-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28upx;
		font-weight: bold;
		color: #5677fc;
		padding: 20upx 20upx 20upx 30upx;
		margin-top: 0upx;
		position: relative;
		background-color: #fdfdfd;
		/* border-bottom: 1px #f5f5f5 solid */
	}

	.example-title-right {
		display: flex;
		font-size: 28upx;
		font-weight: bold;
		color: #5677fc;
		padding: 20upx 0upx 20upx 30upx;
		margin-top: 0upx;
		position: relative;
		background-color: #fdfdfd;
		/* text-decoration: underline; */
	}

	/* title */

	/* card */
	.tui-card {
		padding: 10upx 10upx;
		/* #ifndef MP */
		margin: 10rpx 4rpx 10rpx 4rpx !important;
		/* #endif */
		/* #ifdef MP */
		margin: 2rpx 0rpx -4rpx 0rpx !important;
		/* #endif */
	}

	.tui-article {
		position: relative;
	}

	.tui-article-img {
		width: 100%;
		height: 340upx;
		/* border-radius: 10%; */
		/* display: block; */
	}

	.tui-article-title {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		color: #fff;
		font-size: 30upx;
		font-weight: bold;
		box-sizing: border-box;
		padding: 20upx 30upx;
		background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
	}

	.tui-article-title-status {
		position: absolute;
		left: 0;
		top: 0;
		color: #fff;
		font-size: 28upx;
		font-weight: 500;
		box-sizing: border-box;
		padding: 5upx 8upx;
		/* border-radius: 10%; */
	}

	.tui-article-title-status-two {
		position: absolute;
		right: 0;
		top: 0;
		color: #fff;
		font-size: 28upx;
		font-weight: 500;
		box-sizing: border-box;
		padding: 5upx 8upx;
		border-radius: 40upx;
		/* border-radius: 10%; */
	}

	.span-red {
		background-color: #ff7900;
		/* border-radius: 10%; */
	}

	.span-no {
		background-color: #80849f;
		/* border-radius: 10%; */
	}

	.span-right {
		background-color: #5677FC;
		/* opacity: 0.8; */
		/* border-radius: 10%; */
	}

	/* card */
	.tui-flex {
		display: -webkit-flex;
		display: flex;
	}

	.tui-col-10 {
		width: 83.33333333%;
	}

	.tui-col-2 {
		width: 16.66666667%;
	}

	/* notice */
	.tui-rolling-news-notice {
		width: 100%;
		padding: 12upx 20upx 12upx 0upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: nowrap;
		height: 34px;
		background-color: #fff8d5;
	}

	.tui-icon-notice {
		background: none !important;
		padding-right: 6px;
		padding: 26rpx !important;
		font-weight: bold;
		color: red;
	}

	.tui-swiper-notice {
		font-size: 28upx;
		/* height: 50upx; */
		flex: 1;
	}

	.tui-swiper-item-notice {
		display: flex;
		align-items: center;
	}

	.tui-news-item-notice {
		line-height: 28upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #f54f46;
	}
</style>